<template>
	<view class="indexContainer">
		<!-- 头部容器 -->
		<view class="header">
			<image class="logo" src="/static/img/logo.png" mode=""></image>
			<view class="search">
				<text class="iconfont icon-sousuo"></text>
				<input type="text" value="" placeholder="搜索..." placeholder-class="placeholder"/>
			</view>
			<button type="default">搜索</button>
		</view>
		<!-- 滑块 -->
		<scroll-view class="navScroll" scroll-x="true" enable-flex  v-if="indexData.kingKongModule" style="height: 70rpx;">
			<view class="navItem" :class="{active:navIndex===-1}" @click="changeIndex(-1,-1)">推荐</view>
			<view class="navItem"
					:class="{active:navIndex===index}"
					@click="changeIndex(index,item.L1Id)"
					v-for="(item,index) in indexData.kingKongModule.kingKongList"
					:key="item.L1Id">
					{{ item.text }}
			</view>
		</scroll-view>
		
		<!-- 内容区 -->
		<scroll-view scroll-y="true">
			<!-- 推荐模块-->
			<Recommend v-if="navIndex===-1"></Recommend>
			<CateList v-else  :L1Id='L1Id'></CateList>
		</scroll-view>
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	import { mapActions,mapState } from 'vuex'
	import Recommend from '../../components/Recommend/Recommend.vue'
	import CateList from '../../components/CateList/CateList.vue'
	export default {
		comments:{
			Recommend,CateList
		},
		data() {
			return {
				navIndex:-1, //点谁谁高亮
				L1Id:-1
			}
		},
		onLoad() {
			   //获取仓库里面的测试数据
				 // console.log(this.$store.state.home.test)
			   this.getIndexData()
				 
		},
		methods: {
			...mapActions('home',['getIndexDataActions']),
			//获取首页数据
			async getIndexData(){
				// const res= await request('/api/getIndexData'); //H5
				// const res= await request('/getIndexData'); //小程序
				// this.$store.dispatch('home/getIndexDataActions')	
				this.getIndexDataActions();
			},
			//点击切换下标
			changeIndex(index,id){
				this.navIndex=index
				this.L1Id=id
			}
		},
		computed:{
			...mapState('home',['indexData'])
		}
	}
</script>

<style lang="stylus">
.indexContainer
  .header
    display: flex
    padding: 10rpx 5rpx
    .logo
      width: 140rpx
      height: 60rpx
			margin: 10rpx
		.search
			width: 420rpx
			height: 60rpx
			background: #f5f5f5
			position: relative
			input
				width: 360rpx
				height: 60rpx
				margin-left: 60rpx
				.placeholder
					font-size: 26rpx
					color: #333
			.iconfont
				position: absolute
				font-size: 40rpx
				left: 10rpx 
				top: 10rpx
		button
			width: 144rpx
			height: 60rpx
			line-height: 60rpx
			text-align: center
			font-size: 26rpx
			padding: 0rpx 4rpx
	.navScroll
		//不换行
		white-space: nowrap
		display: flex
		.navItem
			display: inline-block
			height: 40rpx
			padding: 10rpx
			font-size: 26rpx
			&.active
				border-bottom: 3rpx solid #BB2C08
</style>

		